<template>
	<view class="record" @click="getClick">
		<view style="display: flex;flex-direction: row;height: 50rpx;">
			<view class="title">{{title}}</view>
		</view>
		<view style="display: flex;flex-direction: row;height: 50rpx;">
			<view class="city">城市：{{city}}</view>
			<view class="city">{{building}}</view>
		</view>
		<view style="display: flex;flex-direction: row;height: 100rpx;">
			<view class="desc">{{prepare(desc)}}</view>
			<view class="show-img">
				<image style="margin-top: -75rpx;height: 160rpx;" :src="imgUrl"></image>
			</view>
		</view>
		<view style="display: flex;flex-direction: row;height: 50rpx;">
			<view class="read-info">{{readCnt}}</view>
			<view class="time">{{time}}</view>
		</view>
	</view>
</template>

<script>
	/**
	 * author: 陈炎
	 * description: 用于显示 物品放行申请记录单条记录 及 相似格式单条记录
	 * company表示单条记录左上方公司名称
	 * building表示单条记录中上方楼盘名称
	 * time表示单条记录右上方时间
	 * goods表示单条记录左下方物品名称
	 * state表示单条记录右下方状态信息
	 * getClick方法用于监听该组件被点击事件
	 */
	export default{
		props: {
			title:{
				type:String
			},
			building:{
				type:String
			},
			time:{
				type:String
			},
			city:{
				type:String
			},
			desc:{
				type:String
			},
			readCnt:{
				type:Number
			},
			imgUrl:{
				type:String
			},
			selected:{
				type:Boolean
			}
		},
		methods: {
			prepare(text){
				let temp = ''
				if(text.length >= 40){
					temp = text.substring(0,40) + '...(点击查看更多)'
				}else{
					temp = text
				}
				return temp
			},
			getClick() {
				this.$emit("getClick")
			}
		},
	}
</script>

<style>
	.record{
		background-color: #FFFFFF;
		height: 250rpx;
		border-bottom: solid 1rpx #C8C7CC;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
	.title{
		display: flex;
		align-items: center;
		width: 650rpx;
		padding-left: 30rpx;
		font-size: 30rpx;
		font-weight: 900;
	}
	.building{
		display: flex;
		align-items: center;
		width: 100rpx;
		font-size: 30rpx;
		font-weight: 900;
		padding: 0 20rpx 0 20rpx;
	}
	.read-info{
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-left: 35rpx;
		color: #808080;
	}
	.time{
		font-size: 25rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		margin-left: auto;
		margin-right: 20rpx;
		color: #808080;
	}
	.city{
		font-size: 25rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		padding-left: 30rpx;
		color: #313131;
	}
	.desc{
		display: flex;
		align-items: center;
		width: 500rpx;
		padding-left: 30rpx;
		font-size: 25rpx;
		font-weight: 500;
		color: #676767;
	}
	.show-img{
		display: flex;
		align-items: center;
		width: 220rpx;
		padding-left: 20rpx;
		font-size: 25rpx;
		font-weight: 500;
		color: #676767;
	}
	.state-bar{
		display: flex;
		align-items: center;
		color: #FFFFFF;
		background-color: #DD524D;
		width: 160rpx;
		justify-content: center;
		margin-left: auto;
		margin-right: 20rpx;
		font-size: 30rpx;
		border-radius: 50rpx;
	}
	.state-msg{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
	}
</style>
